import React, { Component } from 'react'
import { Link, NavLink, Route } from 'react-router-dom'
import Homes from './home/Homes'
import Recommend from './home/Recommend'
import App from './home/App'
import My from './home/My'

export default class Home extends Component {
    state = {
        routerList: [
            {
                path: "/home/homes",
                name: "首页",
                com: Homes
            },
            {
                path: "/home/recommend",
                name: "推荐",
                com: Recommend
            },
            {
                path: "/home/app",
                name: "应用",
                com: App
            },
            {
                path: "/home/my",
                name: "我的",
                com: My
            }
        ]
    }
    render() {
        const { routerList } = this.state
        return (
            <div className="home">
                <header></header>
                <main>
                    {/* {
                        routerList.map((item, index) => {
                            return <Route path = {item.path} key={index} component = { item.com }/>
                        })
                    } */}

                    {
                        routerList.map((item, index) => {
                            // 在  render  中有路由信息
                            return <Route path={item.path} key={index} render = {(props) => {
                                // props(路由信息)
                                let Com = item.com
                                return <Com/>
                                // if (item.path === "/home/app") {
                                //     return <Com { ...props }/>
                                // } else {
                                //     return <Com/>
                                // }
                            }} />
                        })
                    }

                    {/* {
                        routerList.map((item, index) => {
                            let Com = item.com
                            return <Route path={item.path} key={index}>
                                <Com/>
                            </Route>
                        })
                    } */}
                </main>
                <footer>
                    {/* NavLink activeClassName = "设置class" */}
                    {/* activeStyle = "css" */}
                    {
                        routerList.map((item, index) => {
                            return <NavLink to={item.path} key={index}>
                                {item.name}
                            </NavLink>
                        })
                    }
                </footer>
            </div>
        )
    }
}
